<template>
  <div class="nav-bar">
    <van-nav-bar
      :title="title"
      left-arrow
      @click-left="onClickLeft"
    />
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
import { defineProps } from 'vue';
const props = defineProps<{
  title: string
}>()
const router = useRouter();
const onClickLeft = () => {
  router.go(-1)
}
</script>

<style scoped lang="scss">
.nav-bar{
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
  
  .van-nav-bar {
    background-color: #0ED397;
    :deep .van-nav-bar__title{
      color: #fff;
    }
    :deep .van-nav-bar__arrow{
      color: #fff;
      font-size: 20px;
    }
    
  }
}
</style>